<template>
  <!-- 顶部菜单导航 -->
  <div id="homepagemenu" :class="layoutSkin">
    <el-header class="homeheader">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <div class="menuBox1" v-for="(item, index) in menuList" :key="`menuBox1${index}`">
          <el-sub-menu :key="`elsubmenu${index}`" :class="{ isactive: index == indexActive }" :index="`${index + 1}`"
            v-if="item.children && item.children.length > 0">
            <template #title>
              <div class="onemenubox">
                <el-icon size="16" class="icon">
                  <component :is="item.icon" v-if="item.icon"></component>
                </el-icon>
                <span>{{ item.title }}</span>
              </div>
            </template>
            <el-menu-item
              v-for="(twomenu, twoindex) in item.children ? item.children.filter((p) => p.isAssembly === '0' || !p.isAssembly) : []"
              :index="index + 1 + '-' + (twoindex + 1)" :key="twoindex"
              @click="gotoPage(twomenu.url, index, twomenu.id)"> {{ twomenu.titleSn }}&nbsp;&nbsp;{{ twomenu.title }}</el-menu-item>
          </el-sub-menu>

          <el-menu-item :key="`elmenuitem${index}`" :index="`${index}`" v-else @click="gotoPage(item.url, index, item.id)"
            :class="{ isactive: index == indexActive }">
            <template #title>
              <div class="twomenubox">
                <el-icon size="16" class="icon">
                  <component :is="item.icon" v-if="item.icon"></component>
                </el-icon>
                <span>{{ item.title }}</span>
              </div>
            </template>
          </el-menu-item>
        </div>
      </el-menu>

      <div class="topRightBox">
        <div class="loginPeople">
          <el-tooltip :content="store.userInfo.orgName">
            <span :style="{ width: '120px', color: layoutSkin === 'skin-gray' ? '#000' : '#fff' }">{{
              store.userInfo.orgName }}</span>
          </el-tooltip>
        </div>
        <div class="loginPeople">
          <el-tooltip :content="store.userInfo.realname">
            <span :style="{ width: '120px', color: layoutSkin === 'skin-gray' ? '#000' : '#fff' }">您好：{{
              store.userInfo.realname }}</span>
          </el-tooltip>

          <!-- <el-tooltip content="雅鲁藏布江一二三">
            <span :style="{ width: '140px', color: layoutSkin === 'skin-gray' ? '#000' : '#fff' }">您好：雅鲁藏布江一二三</span>
          </el-tooltip> -->

          <!-- <el-tooltip content="您好：尊贵的Svip会员成毅傅诗淇萧秋水傅云深哈哈哈哈朱一龙罗云熙李健徐志胜张若昀先生">
            <span :style="{ width: '120px', color: layoutSkin === 'skin-gray' ? '#000' : '#fff' }"> 您好：尊贵的Svip会员成毅傅诗淇萧秋水傅云深哈哈哈哈朱一龙罗云熙李健徐志胜张若昀先生</span>
          </el-tooltip> -->
        </div>
        <div class="smallButton">
          <el-tooltip effect="dark" :content="isFullscreen ? '取消全屏' : '切全屏'" placement="bottom">
            <el-icon :size="20" :color="layoutSkin === 'skin-gray' ? '#000' : '#fff'">
              <FullScreen @click="changeFullScreen" />
            </el-icon>
          </el-tooltip>
        </div>

        <div class="smallButton">
          <el-popover placement="bottom" :width="160" trigger="click">
            <template #reference>
              <el-icon size="21" :color="layoutSkin === 'skin-gray' ? '#000' : '#fff'">
                <el-tooltip effect="dark" content="换肤" placement="bottom">
                  <HelpFilled />
                </el-tooltip>
              </el-icon>
            </template>

            <el-row :gutter="20">
              <el-col :span="12">
                <div class="slt-skin" @click="changeLayoutSkin('skin-blue')">
                  <el-container class="skin-blue">
                    <el-header style="height: 10px !important"></el-header>
                    <el-container>
                      <el-aside width="10px" style="height: 50px"></el-aside>
                      <el-main></el-main>
                    </el-container>
                  </el-container>
                  <span>蓝色主题</span>
                </div>
              </el-col>

              <el-col :span="12">
                <div class="slt-skin" @click="changeLayoutSkin('skin-orange')">
                  <el-container class="skin-orange">
                    <el-header style="height: 10px !important"></el-header>
                    <el-container>
                      <el-aside width="10px" style="height: 50px"></el-aside>
                      <el-main></el-main>
                    </el-container>
                  </el-container>
                  <span>深蓝主题</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="slt-skin" @click="changeLayoutSkin('skin-gray')">
                  <el-container class="skin-gray">
                    <el-header style="height: 10px !important"></el-header>
                    <el-container>
                      <el-aside width="10px" style="height: 50px"></el-aside>
                      <el-main></el-main>
                    </el-container>
                  </el-container>
                  <span>灰色主题</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="slt-skin" @click="changeLayoutSkin('skin-green')">
                  <el-container class="skin-green">
                    <el-header style="height: 10px !important"></el-header>
                    <el-container>
                      <el-aside width="10px" style="height: 50px"></el-aside>
                      <el-main></el-main>
                    </el-container>
                  </el-container>
                  <span>绿色主题</span>
                </div>
              </el-col>
            </el-row>
          </el-popover>
        </div>

        <div class="smallButton">
          <el-popover placement="bottom" :width="240" trigger="click">
            <template #reference>
              <el-icon size="21" :color="layoutSkin === 'skin-gray' ? '#000' : '#fff'">
                <el-tooltip effect="dark" content="切换尺寸" placement="bottom">
                  <i class="icon-size el-dropdown-link"></i>
                </el-tooltip>
              </el-icon>
            </template>
            <el-row style="margin-left: 0">
              <el-radio-group v-model="radio2" size="small" @change="changeZoomSize">
                <el-radio-button label="small">小型尺寸</el-radio-button>
                <el-radio-button label="default">中等尺寸</el-radio-button>
                <el-radio-button label="large">超大尺寸</el-radio-button>
              </el-radio-group>
            </el-row>
          </el-popover>
        </div>

        <div class="smallButton">
          <el-popover placement="bottom" :width="100" trigger="click">
            <template #reference>
              <el-icon size="21" :color="layoutSkin === 'skin-gray' ? '#000' : '#fff'">
                <el-tooltip effect="dark" content="退出" placement="bottom">
                  <UserFilled />
                </el-tooltip>
              </el-icon>
            </template>
            <ul class="menu-ul">
              <li>
                <el-button text plain icon="Lock" @click="changePassword">修改密码</el-button>
                <DialogPassword ref="digpwd" />
              </li>
              <li>
                <el-button text plain icon="User">修改信息</el-button>
              </li>
              <li>
                <el-button text plain icon="SwitchButton" @click="logout">退出系统</el-button>
              </li>
            </ul>
          </el-popover>
        </div>
      </div>
    </el-header>
  </div>
</template>
<script setup lang="ts">
import router from '@/router';
import { SourceTextModule } from 'vm';
import { ref, reactive, onMounted, getCurrentInstance, watch } from 'vue';
import { IsEmpty } from '@/utils/common';
import { AppStore } from '../stores/store';
import screenfull from 'screenfull'; //导入全屏插件
import { VxeMessage, VxeNotifyType } from '../utils/CommonMessage'; //消息提示
import DialogPassword from '@/components/DialogPassword.vue';

defineProps({
  menuList: Array
});

let store = AppStore();
let { proxy }: any = getCurrentInstance();

let isFullscreen = ref(false); //全屏状态 默认不是全屏
let radio2 = ref(localStorage.getItem('uiSize'));
let curZoomSize = localStorage.getItem('uiSize'); //按钮尺寸

// 默认获取vuex中的类名
let layoutSkin = ref(store.layoutSkin);

// 获取本地类名 可取vuex中的值
let layoutcolor = ref('skin-blue');
watch(
  () => store.layoutcolor,
  (n, o) => {
    // 将获取的新值动态赋给layoutcolor
    layoutcolor.value = n;
  },
  { deep: true, immediate: true }
);

// 选中高亮
let indexActive = localStorage.getItem('indexActive') ?? 0;
// 高亮项
let activeIndex = localStorage.getItem('activeIndex') ?? '';

// let LabOperationReviewedRef = ref(null); //批次审核标志

function handleSelect(key: string, keyPath: string[]) {
  //activeIndex 例如4-1 就是第上方第4个菜单 然后选的第一个
  //indexActive 例如3   实际上就是上方第四个菜单的索引3
  localStorage.setItem('activeIndex', key);
}

// 点击跳转
function gotoPage(path, index, menuId) {
  const moduleId = localStorage.setItem('curMenuId', IsEmpty(menuId) ? null : menuId);
  localStorage.setItem('indexActive', index);
  proxy.$router.push(path);
  let currentLeftMenu = localStorage.getItem('leftRouterUrl');
  if (currentLeftMenu !== path || path === '') {
    store.closeFullDrawer();
    proxy.$router.push(path);
  }
}

//监听页面大小变化
window.onresize = () => {
  // 全屏下监控是否按键了ESC
  if (!screenfull.isFullscreen && isFullscreen.value) {
    // 全屏下按键esc后要执行的动作
    isFullscreen.value = false;
  }
};
// 全屏
function changeFullScreen() {
  if (!screenfull.isEnabled) {
    VxeMessage('您的浏览器不支持全屏', VxeNotifyType.warning);
    return;
  }
  screenfull.toggle();
  isFullscreen.value = !isFullscreen.value;
}
// 换肤
function changeLayoutSkin(color) {
  // 将类名存到vuex中
  store.setLayoutColor(color);
  // 点击换肤 获取vuex中的类名
  layoutSkin.value = store.layoutSkin;
}

// 改变尺寸大小
function changeZoomSize(command: any) {
  //medium / small / mini
  // 两套：
  // 1.vxe  默认 | medium | small|  mini
  // 2.elementplus  'large' | 'default' | 'small'
  localStorage.setItem('uiSize', command);
  location.reload();
  curZoomSize = command;
}
// 退出登录
function logout() {
  proxy
    .$confirm('确定退出本系统?', '提示', {
      cancelButtonClass: 'cancel-button',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(() => {
      let url = '/public/user/LoginOut';
      proxy.$http
        .post(url)
        .then((res: any) => {
          localStorage.removeItem('token');
          localStorage.removeItem('userInfo');
          localStorage.removeItem('logBaseUrl');
          localStorage.removeItem('layoutSkin');
          // localStorage.removeItem('remUser');
          // 如果没有记住密码(若是记住密码就不用在本地清空)
          if (store.remUser.remPwd !== true) {
            localStorage.removeItem('remUser');
            store.remUser = '';
          }
          proxy.$router.push('/login');
          VxeMessage('退出登录成功', VxeNotifyType.success);
        })
        .catch((err: string) => {
          VxeMessage('退出登录异常', VxeNotifyType.error);
        });
    })
    .catch(() => {
      // console.log('cancel logout');
    });
}
// 修改密码
function changePassword() {
  const refP = 'digpwd';
  const pwd: any = proxy.$refs[refP];
  pwd.showChangePassword();
}
</script>
<style lang="scss" scoped>
#homepagemenu {
  height: 100%;
  width: 100%;
}

.homeheader {
  width: 100%;
  // background: linear-gradient(to right, #3bd9f2, #0084b5);
  padding: 0;
  height: 50px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .el-menu-demo {
    min-width: calc(100% - 600px);
    width: calc(100% - 270px - 50px);
    // background: linear-gradient(to right, #22c3dc, #00a4cd);
    height: 50px !important;
    border: none;

    // .menuBoxAll {
    //   display: flex;
    //   align-items: flex-start;
    //   justify-content: flex-start;
    .menuBox1:hover {
      background-color: #29cbe5;
      border-left: 1px solid;
      border-right: 1px solid;
      border-image: linear-gradient(to bottom, #02a2c2, #fff) 10;
    }

    .menuBox1 {
      position: relative;
      display: flex;

      .onemenubox {
        color: #fff;
        height: 100%;
        vertical-align: middle;
      }

      .twomenubox {
        color: #fff;
        height: 100%;
        vertical-align: middle;
      }

      :deep(.el-sub-menu__title:hover) {
        background-color: transparent;
      }

      :deep(.el-sub-menu__icon-arrow) {
        color: #fff;
      }

      :deep(.el-menu-item) {
        min-width: 100px;
        padding-left: 20px;
        padding-right: 20px;
        height: 50px !important;
        line-height: 50px;
      }

      :deep(.el-menu-item:hover) {
        background-color: transparent;
      }

      .isactive {
        border-left: 1px solid;
        border-right: 1px solid;
        border-image: linear-gradient(to bottom, #02a2c2, #fff) 10;
        background-color: #02a2c2;
      }
    }

    // }
  }

  .topRightBox {
    cursor: pointer;
    width: 500px;
    min-width: 500px;
    max-width: 500px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .loginPeople {
      /* 确保容器有足够的宽度来容纳 tooltip */
      display: inline-block;
      max-width: 150px;
      margin-right: 8px;
      overflow: hidden;
      white-space: nowrap;
      /* 文本不换行 */
      text-overflow: ellipsis;
      /* 超出部分显示省略号 */
    }
  }
}

:deep(.el-main) {
  background-color: $bg-gray;
}

:deep(.el-header) {
  height: 50px !important;
}

:deep(#homepage .el-container .el-header) {
  height: 50px !important;
}

.el-sub-menu {
  :deep(.el-sub-menu__title) {
    min-width: 100px;
    height: 50px !important;
    line-height: 50px;
    // color:#fff ;
    // .el-icon {
    //   color: #fff
    // }
  }
}

// :deep(.el-menu--horizontal) {
//   color: #000;
//   :hover {
//     background-color: transparent;
//   }
// }
// :deep(.el-menu--horizontal>.el-sub-menu) {
//   color: #000;
//   :hover {
//       background-color: transparent;
//   }
// }
// :deep(.el-menu--horizontal>.el-sub-menu .el-sub-menu__title) {
//   color:#fff;
// }</style>
